<template>
  <!--  背景-->
  <div id="building">
    <!--    默认选项 :default-active="default"-->
    <el-menu
      router
      style="width: 100%"
      :default-active="activeIndex"
      class="el-menu-consumer"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handleSelect"
    >
      <!--      <a href="../login/index.vue" target="_blank">进入门户</a>-->
      <div class="demo">
        <el-menu-item index="/begins">进入门户</el-menu-item>
        <el-menu-item index="/Qadd">消息中心</el-menu-item>
        <el-menu-item><a
          href="https://gitee.com/cyxcyx666/product-traceability-system.git"
          target="_blank"
        >加入我们</a></el-menu-item>
        <!--        <el-menu-item index="/trace">溯源码搜索页面测试</el-menu-item>-->
        <el-menu-item index="/res">反馈结果查询</el-menu-item>
        <el-menu-item @click="feedback">问题反馈</el-menu-item>
        <el-menu-item index="/productSearch">首页</el-menu-item>
      </div>

    </el-menu>
    <el-container class="title-container">
      <h3 class="title">欢迎来到产品溯源平台</h3>
    </el-container>
    <el-dialog
      append-to-body
      title="反馈信息:"
      width="55%"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        ref="vForm"
        v-loading="loading"
        :model="formData"
        :rules="rules"
        label-position="left"
        label-width="150px"
        size="medium"
        @submit.native.prevent
      >
        <el-row>
          <el-col :span="22" :offset="1" class="grid-cell">
            <div class="static-content-item">
              <el-alert
                title="个人信息填写："
                type="success"
                description="我们遵守国家相关规定，不对外泄露个人信息"
                :closable="true"
                :center="true"
                :show-icon="true"
                effect="light"
              />
            </div>
          </el-col>
        </el-row>
        <div class="static-content-item">
          <el-divider direction="horizontal" content-position="left">我是可爱的分割线</el-divider>
        </div>
        <el-row>
          <el-col :span="10" :offset="1" class="grid-cell">
            <el-form-item label="反馈人姓名：" prop="name" class="required label-center-align">
              <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="10" :push="2" class="grid-cell">
            <el-form-item label="反馈人性别：" prop="sex" class="required label-center-align">
              <el-select v-model="formData.sex" class="full-width-input" clearable>
                <el-option
                  v-for="(item, index) in sexOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10" :offset="1" class="grid-cell">
            <el-form-item label="身份证号：" prop="identify" class="required label-center-align">
              <el-input
                v-model="formData.identify"
                type="text"
                placeholder="必填"
                clearable
                :minlength="18"
                :maxlength="18"
                :show-word-limit="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="10" :push="2" class="grid-cell">
            <el-form-item label="联系电话：" prop="tel" class="required label-center-align">
              <el-input v-model="formData.tel" type="text" placeholder="必填" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10" :offset="1" class="grid-cell">
            <el-form-item label="联系邮箱：" prop="email" class="required label-center-align">
              <el-input v-model="formData.email" type="text" placeholder="必填" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="2" class="grid-cell">
            <el-form-item label="固定地址：" prop="address" class="label-center-align">
              <el-input v-model="formData.address" type="text" placeholder="必填" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22" :offset="1" class="grid-cell">
            <div class="static-content-item">
              <el-alert
                title="反馈信息填写："
                type="warning"
                description="我们将对反馈信息递交生产企业，保证信息可达"
                :closable="true"
                :center="true"
                :show-icon="true"
                effect="light"
              />
            </div>
          </el-col>
        </el-row>
        <div class="static-content-item">
          <el-divider direction="horizontal" content-position="right">我也是可爱的分割线</el-divider>
        </div>
        <el-row>
          <el-col :span="10" :offset="1" class="grid-cell">
            <el-form-item label="产品溯源码：" prop="productCode" class="required label-center-align">
              <el-input v-model="formData.productCode" type="text" placeholder="必填" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="10" :push="2" class="grid-cell">
            <el-form-item label="产品名称：" prop="productName" class="required label-center-align">
              <el-input v-model="formData.productName" type="text" placeholder="必填" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22" :offset="1" class="grid-cell">
            <el-form-item label="反馈信息：" prop="feedbackInfo" class="required label-center-align">
              <el-input
                v-model="formData.feedbackInfo"
                type="textarea"
                placeholder="必填"
                rows="3"
                :show-word-limit="true"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-container class="main" direction="horizontal">

      <el-input
        v-model="ProSearch"
        placeholder="请输入产品溯源码"
        prefix-icon="el-icon-search"
      />
      <div style="margin: auto"><el-button type="primary" class="searchButton" @click="searchButton">搜索</el-button></div>
      <!--      对话框-->
      <el-dialog
        append-to-body
        title="溯源码搜索结果:"
        width="55%"
        :visible.sync="searchVisible"
      >
        <el-container style="margin: 0px">
          <el-scrollbar height="400px" />
          <el-main>
            <div style="max-height: 500px">
              <el-scrollbar height="10px">
                <el-header style="margin: auto;height: auto"><h2>商品信息: </h2></el-header>
                <div id="productInfo" style="display: flex;justify-content: center;align-items: center;">
                  <el-scrollbar height="100px">
                    <el-table
                      :data="productInfo"
                      style="width: 100%;"
                      max-height="200px"
                    >
                      <el-table-column fixed type="index" label="序号" width="50" sortable />
                      <el-table-column prop="id" label="商品溯源码" width="120" />
                      <el-table-column fixed prop="proName" label="商品名称" width="120" />
                      <el-table-column prop="kind" label="种类" width="100" />
                      <el-table-column prop="expiration" label="保质期" width="100" />
                      <el-table-column prop="firmName" label="生产厂家" width="300" />
                    </el-table>
                  </el-scrollbar>
                </div>
                <el-header style="margin: auto;height: auto"><h2>生产企业信息： </h2></el-header>
                <div id="weightContainer" style="display: flex;justify-content: center;align-items: center;">
                  <el-scrollbar height="100px">
                    <el-table
                      :data="firmInfo"
                      style="width: 100%;"
                      max-height="200px"
                    >
                      <el-table-column fixed type="index" label="序号" width="50" sortable />
                      <el-table-column fixed prop="firmName" label="企业名称" width="150" />
                      <el-table-column prop="firmPro" label="企业产品" width="150" />
                      <el-table-column prop="tel" label="企业联系电话" width="150" />
                      <el-table-column prop="firmAdd" label="企业地址" width="250" />
                      <el-table-column prop="firmProfile" label="企业简介" width="300" />
                    </el-table>
                  </el-scrollbar>
                </div>
                <el-header style="margin: auto;height: auto"><h2>产品物流信息： </h2></el-header>
                <div id="logInfo" style="display: flex;justify-content: center;align-items: center;">
                  <el-scrollbar height="100px">
                    <el-table
                      :data="logInfo"
                      style="width: 100%;"
                      max-height="200px"
                    >
                      <el-table-column fixed type="index" label="序号" width="50" sortable />
                      <el-table-column fixed prop="proName" label="产品名称" width="150" />
                      <el-table-column prop="productCode" label="物流批次号" width="100" />
                      <el-table-column prop="source" label="原产地" width="150" />
                      <el-table-column prop="destination" label="运输目的地" width="250" />
                      <el-table-column prop="outCharge" label="出库负责人" width="100" />
                      <el-table-column prop="inCharge" label="入库负责人" width="100" />
                    </el-table>
                  </el-scrollbar>
                </div>
                <el-header style="margin: auto;height: auto"><h2>物流公司信息： </h2></el-header>
                <div id="expressInfo" style="display: flex;justify-content: center;align-items: center;">
                  <el-scrollbar height="100px">
                    <el-table
                      :data="expressInfo"
                      style="width: 100%;"
                      max-height="200px"
                    >
                      <el-table-column fixed type="index" label="序号" width="50" sortable />
                      <el-table-column fixed prop="firmlogName" label="物流公司名称" width="150" />
                      <el-table-column prop="respName" label="负责人" width="100" />
                      <el-table-column prop="resTel" label="联系电话" width="150" />
                      <el-table-column prop="firmlogProfile" label="物流公司简介" width="500" />
                    </el-table>
                  </el-scrollbar>
                </div>
                <el-header style="margin: auto;height: auto"><h2>供货农场信息： </h2></el-header>
                <div id="expressInfo" style="display: flex;justify-content: center;align-items: center;">
                  <el-scrollbar height="100px">
                    <el-table
                      :data="farmInfo"
                      style="width: 100%;"
                      max-height="200px"
                    >
                      <el-table-column fixed type="index" label="序号" width="50" sortable />
                      <el-table-column fixed prop="farmName" label="供货农场名称" width="150" />
                      <el-table-column prop="farmTel" label="农场联系电话" width="150" />
                      <el-table-column prop="farmLocation" label="农场地址" width="450" />
                    </el-table>
                  </el-scrollbar>
                </div>
              </el-scrollbar>
            </div>
          </el-main>
        </el-container>

        <div slot="footer" class="dialog-footer">
          <el-button @click="searchCancel">取 消</el-button>
        </div>
      </el-dialog>
    </el-container>
  </div>

</template>

<script>
import request from '@/request'
import { Loading } from 'element-ui'

export default {
  name: 'ProductSearch',
  data() {
    return {
      loading: false,
      dialogFormVisible: false,
      searchVisible: false,
      ProSearch: '',
      activeIndex: '/productSearch',
      formData: {
        name: '',
        sex: '',
        identify: '',
        tel: '',
        email: '',
        address: '',
        productCode: '',
        productName: '',
        feedbackInfo: ''
      },
      productInfo: [
        {
          id: '1001',
          proName: '有机黄桃罐头',
          kind: '零食',
          expiration: '2023-12-22',
          firmName: '南京天天食品有限公司'
        }
      ],
      firmInfo: [
        {
          'firmName': '南京天天食品有限公司',
          'firmPro': '黄桃罐头，蜜橘罐头，有机柿饼，越南芒果干',
          'tel': '17838347997',
          'firmAdd': '江苏省南京市仙林大道222号',
          'firmProfile': '南京天天食品有限公司是一家专门生产水果零食的企业。'
        }
      ],
      logInfo: [
        {
          'proName': '有机黄桃罐头',
          'productCode': '3011',
          'source': '东东农场',
          'destination': '河南郑州龙湖镇好又多超市',
          'outCharge': '张吉惟',
          'inCharge': '雷进宝'
        }
      ],
      expressInfo: [
        {
          'firmlogName': '顺丰快递有限公司',
          'respName': '张喜波',
          'resTel': '17838347337',
          'firmlogProfile': '顺丰是国内的快递物流综合服务商，总部位于深圳，经过多年发展，已初步建立为客户提供一体化综合物流解决方案的能力，不仅提供配送端的物流服务，还延伸至价值链前端的产、供、销、配等环节。'
        }
      ],
      farmInfo: [
        {
          'farmName': '东东农场',
          'farmTel': '17828237721',
          'farmLocation': '江苏镇江金港大道静冈村'
        }
      ],
      rules: {
        name: [{
          required: true,
          message: '姓名不可为空'
        }, {
          pattern: /^[一-龥]+$/,
          trigger: ['blur', 'change'],
          message: '仅支持中文名'
        }],
        sex: [{
          required: true,
          message: '请选择'
        }],
        identify: [{
          required: true,
          message: '身份证不可为空'
        }, {
          pattern: /^[A-Za-z0-9]+$/,
          trigger: ['blur', 'change'],
          message: '请输入正确的身份证号'
        }],
        tel: [{
          required: true,
          message: '联系电话不可为空'
        }, {
          pattern: /^[1][3-9][0-9]{9}$/,
          trigger: ['blur', 'change'],
          message: '请检查输入的号码'
        }],
        email: [{
          required: true,
          message: '联系邮箱不可为空'
        }],
        address: [{
          required: true,
          message: '固定地址不可为空'
        }],
        productCode: [{
          required: true,
          message: '产品溯源码不可为空'
        }, {
          pattern: /^[A-Za-z0-9]+$/,
          trigger: ['blur', 'change'],
          message: '请输入正确的溯源码'
        }],
        productName: [{
          required: true,
          message: '产品名称不可为空'
        }],
        feedbackInfo: [{
          required: true,
          message: '反馈信息不可为空'
        }]
      },
      sexOptions: [
        {
          'label': '男',
          'value': '男'
        }, {
          'label': '女',
          'value': '女'
        }, {
          'label': '未知',
          'value': '未知'
        }]
    }
  },
  methods: {
    feedback() {
      this.dialogFormVisible = true
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    cancel() {
      this.dialogFormVisible = false
      this.$refs['vForm'].resetFields()
    },
    submitForm() {
      this.loading = true
      this.$refs['vForm'].validate(valid => {
        if (!valid) {
          this.loading = false
          this.$message({
            type: 'warning',
            message: '请检查填写信息'
          })
          return
        }
        this.$message({
          type: 'warning',
          message: '正在进行产品信息真实性检查'
        })
        setTimeout(() => {
          request.get('/productInfo/find/', {
            params: {
              id: this.formData.productCode
            }
          }).then(response => {
            if (response.code === 0) {
              this.$message({
                type: 'error',
                message: response.msg
              })
              this.loading = false
              return
            }
            request.get('/productInfo/findById/', {
              params: {
                id: this.formData.productCode,
                tenantId: response.data
              }
            }).then(res => {
              if (res.code === 20000 && res.data[0].proName === this.formData.productName) {
                this.$notify({
                  type: 'success',
                  message: '产品信息真实性检查通过!正在提交信息',
                  offset: 70
                })
                const loadingInstance = Loading.service({ fullscreen: true })
                // TODO: 提交表单
                request.get('/unReadFeedback/add', {
                  params: {
                    name: this.formData.name,
                    sex: this.formData.sex,
                    identify: this.formData.identify,
                    tel: this.formData.tel,
                    email: this.formData.email,
                    address: this.formData.address,
                    productCode: this.formData.productCode,
                    productName: this.formData.productName,
                    feedbackInfo: this.formData.feedbackInfo,
                    tenantId: response.data
                  }
                }).then(res => {
                  if (res.code === 20000) {
                    this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
                      loadingInstance.close()
                    })
                    this.$refs['vForm'].resetFields()
                    this.dialogFormVisible = false
                    this.$message({
                      type: 'success',
                      message: '反馈成功'
                    })
                  } else {
                    this.$message({
                      type: 'error',
                      message: res.msg
                    })
                  }
                  this.loading = false
                })
              } else {
                this.loading = false
                this.$notify({
                  type: 'error',
                  message: '未能查询到相关产品，请核对产品溯源码和产品名称',
                  offset: 70
                })
                return
              }
            })
          })
        }, 50)
      })
    },
    searchButton() {
      if (this.ProSearch === '') {
        this.$message({
          type: 'warning',
          message: '请输入商品上的防伪溯源码'
        })
        return
      }
      // TODO 带参数跳转
      this.$router.push({ path: '/trace?codeKey=' + this.ProSearch })
    },
    search() {
      // this.searchVisible = true
    },
    searchCancel() {
      this.searchVisible = false
    }
  }
}
</script>

<style scoped>
#building {
  background: url("../assets/image/searchPage.png");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100%;
}

.demo {
  display: flex;
  flex-direction: row-reverse;
  /*flex-direction: row-reverse;*/
  flex-wrap: wrap;
}

.searchButton {
  /*height: 60px;*/

}

.main {
  text-align: center;
  background-color: rgba(255, 255, 0, 0);
  /*容器背景色透明*/
  border-radius: 20px;
  display: flex;
  width: 50%;
  margin: 0 auto;
  justify-content: center;
  /*width: 500px;*/
  /*!*height: 600px;*!*/
  /*position: absolute;*/
  /*left: 53%;*/
  /*top: 30%;*/
  /*transform: translate(-50%, -50%);*/
}

.title {
  color: #090909;
  font-size: 30px;
  font-family: "Times New Roman", Times, serif;

}

.title-container {
  text-align: center;
  /*容器背景色透明*/
  border-radius: 20px;
  display: flex;
  justify-content: center;
  margin-top: 10%;
  /*width: 500px;*/
  /*!*height: 600px;*!*/
  /*position: relative;*/
  /*left: 43%;*/
  /*top: 13%;*/
//transform: translate(-50%, -50%);
}

/*input表单透明*/
/deep/ .el-input__inner {
  background-color: transparent !important;
  border: 1px solid #f5f6f6;
}

/deep/ .el-input input {
  color: #090909 !important;
}
</style>
<style lang="scss">
.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px !important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}

</style>
<style lang="scss" scoped>
div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #e1e2e3;
    }
  }
}

div.tab-container {
}

.label-left-align ::v-deep .el-form-item__label {
  text-align: left;
}

.label-center-align ::v-deep .el-form-item__label {
  text-align: center;
}

.label-right-align ::v-deep .el-form-item__label {
  text-align: right;
}

.custom-label {
}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}

h2 {

  font-family: Arial, sans-serif;

  font-size: 24px;

  color: #fff;

  padding: 4px;

  background-color: #696;

}

</style>
